<template>
  <Select
      :placeholder="placeholder ? placeholder : '请选择权限'"
      :multiple="multiple"
      filterable
      v-model="id"
      :size="size ? size : ''">
    <Option value="" v-show="showAll" label="全部"></Option>
    <Option
        v-for="(item, index) in list"
        :disabled="item.id == noId"
        :value="item.id"
        :label="item.name"
        :key="index">
    </Option>
  </Select>
</template>

<script>
import {mapState, mapActions} from "vuex"

export default {
  props: [
    "value",
    "placeholder",
    "multiple",
    "name",
    "showAll",
    "size",
    "noId"
  ],
  data() {
    return {
      id: null
    }
  },

  watch: {
    value() {
      this.id = this.value
    },
    id() {
      this.handleChange();
    },
    list() {
      this.id = this.value
    }
  },
  computed: {
    ...mapState({
      mainLoading: state => state.main_loading,
      list: state => state.permission.list
    })
  },

  created() {
    this.fetchData();
  },

  methods: {
    ...mapActions(['getPermissionList']),
    fetchData() {
      this.getPermissionList({len: 0});
    },
    handleChange() {
      this.$emit("input", this.id)
    },
  }
}
</script>
